<template>
  <!--树-->
  <ul v-if="data.length > 0" class="tree-menu" ref="treeMenu">
    <li v-for="(item, index) in data" :key="index">
      <span class="tree-node">
        <span v-if="item.children && item.children.length != 0"
              class="triangle-label"
              @click="controlMenu($event,index)">
          <i :class="[open?'triangleOpen':'triangleClose','triangle']"/>
        </span>
        <span v-if="item.disable && item.disable == '1'" class="tree-label-disable" style="width: 100%" v-text="item.label"></span>
        <span v-else class="tree-label" @click="select(item.value,item.label)" style="width: 100%" v-text="item.label"></span>
      </span>
      <hu-tree-selector ref="child" @selected = "select" v-show="item.children" :data="item.children" :isOpen="open" :open="open"/>
    </li>
  </ul>
</template>
<script>
    export default {
        name: 'HuTreeSelector',
        props: {
            data: {
                type: Array,
                default: () => [],
            },
            isOpen: {
                type: Boolean,
                default: () => true,
            },
            open: {
                type: Boolean,
                default: () => true,
            },
        },
        data() {
            return{
                items: [],
            }
        },
        watch:{
            isOpen(newData, oldData) {
                this.initDate(newData,newData)
            },
        },
        mounted() {
            this.initDate(this.isOpen,this.open)
        },
        methods: {
            initDate(d1,d2) {
                if (d1) {
                    this.$refs.treeMenu.style.display = "block"
                } else {
                    this.$refs.treeMenu.style.display = "none"
                }
                this.items= new Array(this.data.length).fill(d2)
            },
            controlMenu(e,index) {
                if (this.items[index]) {
                    e.currentTarget.firstElementChild.style.transform = "rotateZ(0deg)"
                    e.currentTarget.parentElement.nextElementSibling.style.display = "none"
                } else {
                    e.currentTarget.firstElementChild.style.transform = "rotateZ(90deg)"
                    e.currentTarget.parentElement.nextElementSibling.style.display = "block"
                }
                this.items[index] = !this.items[index]
            },
            select(val,lab) {
                this.$emit("selected", val, lab);
            },
        },
    }
</script>
<style scoped>
  .tree-menu {
    padding-left: 10px;
    list-style: none;
    position: relative;
    user-select: none;
    background-color: #222833;
    transition: 0.5s;
    overflow: hidden;
  }
  .tree-node{
    display: inline-block;
    line-height: 25px;
    width: 100%;
  }
  .currentNodeBC {
    background-color: #252b38
  }
  .tree-node:hover{
    background-color: #252b38 !important;
  }
  .triangle-label{
    cursor: pointer;
    position: absolute;
  }
  .triangle {
    width: 0;
    height: 0;
    display: inline-block;
    border: 5px solid transparent;
    border-left: 5px solid rgba(255, 255, 255, 0.4);
    margin-left: 5px;
    transition: all 0.2s;
    transform-origin: 25% 50%;
  }
  .triangleOpen {
    transform :rotateZ(90deg);
  }
  .triangleClose {
    transform :rotateZ(0deg);
  }
  .tree-label-disable{
    cursor:  not-allowed;
    display: inline-block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
    margin-left: 18px;
  }
  .tree-label{
    cursor: default;
    display: inline-block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 18px;
  }
</style>
